<template>
  <div class="tab-container"> 
     <!-- 导航栏 -->
     <div class="find-tab">
     <router-link to="/login" > <svg class="bi bi-list" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path  fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
    </svg></router-link>
    <ul class="tab">
    <li><router-link to='/find' :class="{active:tag=='我的'}" @click='tag="我的"'>我的</router-link></li>
    <li><router-link to='/find' :class="{active:tag=='发现'}" @click='tag="发现"'>发现</router-link></li>
    <li><router-link to='/find' :class="{active:tag=='云村'}" @click='tag="云村"'>云村</router-link></li>
     <li><router-link to='/find' :class="{active:tag=='视频'}" @click='tag="视频"'>视频</router-link></li>
     </ul>
     <router-link to='/search'  class="search">
    <svg class="bi bi-search" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
      <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
    </svg></router-link>
  </div>
</div>
</template>

<script>
import  '../../node_modules/bootstrap/dist/css/bootstrap.css'
import  '../assets/find.css'
export default {
data(){
  return {
    tag:'发现'
  }
},
methods:{
  todetail(){
    this.$router.push('/detail')
  },
  tosearch(){
    this.$router.push('/search')
  }
}
}
</script>

<style lang="less" scoped>
.search{
  width: 20px;
  margin-left: -50px;
}
.find-tab{/* 固定定位以屏幕为准 */
  display: flex;
  /* justify-content: center; */
  justify-content: space-around;
  position: fixed;/* 有定位margin就无效了 */
  top: 0;
  left: 50%;
  transform: translateX(-50%);/* 本身的50% */
  -webkit-transform: translateX(-50%);
  width: 100%;
  max-width: 640px;
  min-width: 320px;
  /* background-color: blanchedalmond; */
  height: 60px;
  line-height: 60px;
}
.find-tab .bi-list{
  position: absolute;
  top: 19px;
  left: 15px;
  font-size: 20px;
}
.find-tab .bi-search{
  position: absolute;
  top: 19px;
right: 15px;
font-size: 20px;
}
.find-tab ul {
  width: 80%;
}

.find-tab ul li{
  float: left;
  width: 15%;
  font-size: 20px;
}
h1, h2 {
  font-weight: normal;
}
ul {display: flex;
  list-style-type: none;
  padding: 0;
}
li {
width: 20%;
  display: inline-block;
  margin: 0 10px;
}
</style>